{%- liquid
  assign show_padding = true
  case section.settings.color_schema
    when 'primary'
      assign background_color = 'bg-primary'
    when 'secondary'
      assign background_color = 'bg-secondary'
    when 'inverse'
      assign background_color = 'bg-inverse'
    when 'white'
      assign background_color = 'bg-white'
      assign show_padding = false
    when 'black'
      assign background_color = 'bg-black'
  endcase

  case section.settings.pagination_color
    when 'black'
      assign indicator_style = 'carousel-dark'
    when 'white'
    assign indicator_style = ''
  endcase

  if show_padding
    if section.settings.full_width
      assign class_public_name = ''
    else
      assign class_public_name = 'py-section'
    endif
  else
  if section.settings.full_width
      assign class_public_name = ''
    else
      assign class_public_name = 'my-section'
    endif
  endif
-%}



{%- liquid
  case section.settings.image_height
    when 'small'
      assign image_height = 'h-6 h-lg-5'
    when 'medium'
      assign image_height = 'h-7 h-lg-6'
    when 'large'
      assign image_height = 'h-8 h-lg-7'
    when 'adapt_to_image'
      assign image_height = 'adapt-to-image'
    else
    assign image_height = ''
  endcase

  if section.settings.image_height == 'adapt_to_image' and section.settings.fixed_height
  assign image_height = 'adapt-to-image responsive-height'
  endif

  assign indicator_class = ''
  assign indicator_container_class = ''
  assign indicators_inline_style = ''
  case section.settings.pagination_style
    when 'circle'
      assign indicator_class = 'indicator-circle'
    when 'dots'
      assign indicator_class = 'indicator-dot'
    when 'line'
      assign indicator_class = 'indicator-line'
  endcase
  if section.settings.auto_rotate_slides
    assign indicator_container_class = 'indicators-auto-slide'
    assign indicators_inline_style = 'style="--carousel-indicator-interval: ' | append: section.settings.rotation_interval | append: 's";'
  endif

-%}

{{ 'slideshow.min.css' | asset_url | stylesheet_tag }}

<div class="{{ class_public_name }} {{ background_color }}">
  <div class="{% if section.settings.full_width %} {% else %} container {% endif %}">
    <div id="featured-slide-show-{{ section.id }}" class="as-slideshow carousel slide {{ indicator_style }}" {% if section.settings.auto_rotate_slides %}data-bs-interval="{{ section.settings.rotation_interval | times: 1000 }}" data-bs-ride="carousel" {% else %}data-bs-interval="false"{% endif %}>
      <div class="carousel-inner overflow-hidden {% if section.settings.full_width %} {% else %} rounded-3 {% endif %}">
        {%- for block in section.blocks -%}
          <div class="carousel-item {% if forloop.first %}active{% endif %}">
            {%- render 'slideshow-image-text', settings: block.settings, block: block, image_height: image_height, has_image_overlay_opacity: true, enable_image_link: section.settings.enable_image_link -%}
          </div>
        {%- endfor -%}
        {% if section.blocks.size > 1 %}
        <div class="carousel-indicators {{ indicator_container_class }}" {{ indicators_inline_style }}>
          {%- for block in section.blocks -%}
            <button type="button"
              data-bs-target="#featured-slide-show-{{ section.id }}"
              data-bs-slide-to="{{ forloop.index0 }}"
              {%- if forloop.first -%}class="active {{ indicator_class }}" aria-current="true"{% else %}class="{{ indicator_class }}"{%- endif -%}
              aria-label="Slide {{ forloop.index }}">
              {%- if section.settings.pagination_style == 'circle' -%}
                {% render 'icon-circle' %}
              {%- endif -%}
            </button>
          {%- endfor -%}
        </div>
        {% endif %}
      </div>
      {% if section.blocks.size > 1 %}
      <button class="carousel-control-prev d-none d-lg-flex" type="button" data-bs-target="#featured-slide-show-{{ section.id }}" data-bs-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="visually-hidden">Previous</span>
      </button>
      <button class="carousel-control-next d-none d-lg-flex" type="button" data-bs-target="#featured-slide-show-{{ section.id }}" data-bs-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="visually-hidden">Next</span>
      </button>
      {% endif %}
    </div>
  </div>
</div>

{% schema %}
  {
    "name": "Slideshow",
    "class": "slideshow",
    "tag": "section",
    "settings": [
      {
        "type": "checkbox",
        "id": "full_width",
        "label": "Full width",
        "default": true
      },
      {
        "type": "select",
        "id": "image_height",
        "label": "Image height",
        "options": [
          {
            "value": "adapt_to_image",
            "label": "Adapt to image"
          },
          {
            "value": "small",
            "label": "Small"
          },
          {
            "value": "medium",
            "label": "Medium"
          },
          {
            "value": "large",
            "label": "Large"
          }
        ],
        "default": "adapt_to_image"
      },
      {
        "type": "checkbox",
        "id": "fixed_height",
        "label": "Image will be fixed height when choose \"Adapt to image\".",
        "default": true
      },
      {
        "type": "select",
        "id": "pagination_style",
        "label": "Pagination style",
        "options": [
          {
            "value": "circle",
            "label": "Circle"
          },
          {
            "value": "dots",
            "label": "Dots"
          },
          {
            "value": "line",
            "label": "Line"
          }
        ],
        "default": "dots"
      },
      {
        "type": "select",
        "id": "pagination_color",
        "label": "Pagination color",
        "options": [
          {
            "value": "white",
              "label": "White"
          },
          {
            "value": "black",
            "label": "Black"
          }
        ],
        "default": "black"
      },
      {
        "type": "checkbox",
        "id": "auto_rotate_slides",
        "label": "Auto-rotate slides",
        "default": false
      },
      {
        "type": "range",
        "id": "rotation_interval",
        "min": 5,
        "max": 10,
        "step": 1,
        "unit": "s",
        "label": "Change slides every",
        "info": "Only work when active auto-rotate",
        "default": 5
      },
      {
        "type": "select",
        "id": "color_schema",
        "label": "Background color",
        "options": [
          {
            "value": "primary",
            "label": "Primary"
          },
          {
            "value": "secondary",
            "label": "Secondary"
          },
          {
            "value": "inverse",
            "label": "Inverse"
          },
          {
            "value": "white",
            "label": "White"
          },
          {
            "value": "black",
            "label": "Black"
          }
        ],
        "default": "white"
      },
      {
        "type": "checkbox",
        "id": "enable_image_link",
        "label": "Enable image link",
        "default": true
      },
      {
        "type": "select",
        "id": "fontsize",
        "label": "Fontsize",
        "options": [
          {
            "value": "display-4",
            "label": "Extra large"
          },
          {
            "value": "display-5",
            "label": "Large"
          },
          {
            "value": "h1",
            "label": "Medium"
          },
          {
            "value": "h2",
            "label": "Small"
          },
          {
            "value": "h3",
            "label": "Extra small"
          }
        ],
        "default":   "h1"
      }
    ],
    "blocks":[
      {
        "type": "slide",
        "name": "Slide",
        "settings": [
          {
            "label": "Desktop Image",
            "type": "image_picker",
            "id": "desktop_image"
          },
          {
            "label": "Mobile Image",
            "type": "image_picker",
            "id": "mobile_image"
          },
          {
            "type": "range",
            "id": "image_overlay_opacity",
            "min": 0,
            "max": 100,
            "step": 20,
            "default": 0,
            "unit": "%",
            "label": "Image overlay opacity"
          },
          {
            "type": "text",
            "id": "overline",
            "default": "Overline",
            "label": "Overline"
          },
          {
            "type": "text",
            "id": "heading",
            "default": "Image with text",
            "label": "Heading"
          },
          {
            "type": "richtext",
            "id": "text",
            "default": "<p>Pair text with an image to focus on your chosen product, collection, or blog post. Add details on availability, style, or even provide a review.</p>",
            "label": "Description"
          },
          {
            "type": "range",
            "id": "text_shadow_ammount",
            "min": 0,
            "max": 100,
            "step": 20,
            "default": 0,
            "unit": "%",
            "label": "Text shadow ammount"
          },
          {
            "type": "select",
            "id": "desktop_text_position",
            "label": "Desktop text position",
            "options": [
              {
                "value": "top_left",
                "label": "Top left"
              },
              {
                "value": "top_center",
                "label": "Top center"
              },
              {
                "value": "top_right",
                "label": "Top right"
              },
              {
                "value": "middle_left",
                "label": "Middle left"
              },
              {
                "value": "middle_center",
                "label": "Middle center"
              },
              {
                "value": "middle_right",
                "label": "Middle right"
              },
              {
                "value": "bottom_left",
                "label": "Bottom left"
              },
              {
                "value": "bottom_center",
                "label": "Bottom center"
              },
              {
                "value": "bottom_right",
                "label": "Bottom right"
              }
            ],
            "default":   "middle_left"
          },
          {
            "type": "select",
            "id": "mobile_text_position",
            "label": "Mobile text position",
            "options": [
              {
                "value": "top",
                "label": "Top"
              },
              {
                "value": "center",
                "label": "Center"
              },
              {
                "value": "bottom",
                "label": "Bottom"
              }
            ],
            "default": "top"
          },
          {
            "type": "select",
            "id": "text_width",
            "label": "Desktop text width",
            "options": [
              {
                "value": "col-md-8",
                "label": "2/3"
              },
              {
                "value": "col-md-6",
                "label": "1/2"
              },
              {
                "value": "col-md-4",
                "label": "1/3"
              }
            ],
            "default": "col-md-6"
          },
          {
            "type": "select",
            "id": "text_color",
            "label": "Text color",
            "options": [
              {
                "value": "white",
                 "label": "White"
              },
              {
                "value": "black",
                "label": "Black"
              }
            ],
            "default": "black"
          },
          {
            "type": "select",
            "id": "desktop_text_alignment",
            "label": "Desktop text alignment",
            "options": [
              {
                "value": "left",
                "label": "Left"
              },
              {
                "value": "center",
                "label": "Center"
              },
              {
                "value": "right",
                "label": "Right"
              }
            ],
            "default": "left"
          },
          {
            "type": "select",
            "id": "mobile_text_alignment",
            "label": "Mobile text alignment",
            "options": [
              {
                "value": "left",
                "label": "Left"
              },
              {
                "value": "center",
                "label": "Center"
              },
              {
                "value": "right",
                "label": "Right"
              }
            ],
            "default": "left"
          },
          {
            "type": "header",
            "content": "Button"
          },
          {
            "type": "text",
            "id": "button_label_1",
            "default": "Button label",
            "label": "Primary button label"
          },
          {
            "type": "url",
            "id": "button_link_1",
            "label": "Primary button link"
          },
          {
            "type": "text",
            "id": "button_label_2",
            "default": "Button label",
            "label": "Secondary button label"
          },
          {
            "type": "url",
            "id": "button_link_2",
            "label": "Secondary button link"
          },
          {
            "type": "select",
            "id": "button_set_style",
            "label": "Button set style",
            "options": [
              {
                "value": "kiks-btn-primary",
                "label": "Kiks Solid button"
              },
              {
                "value": "kiks-btn-secondary",
                "label": "Kiks Outlined button"
              }, 
              {
                "value": "solid_with_outline",
                "label": "Solid button with Outlined button"
              },
              {
                "value": "solid_with_text_link",
                "label": "Solid button with Text link"
              },
              {
                "value": "outline",
                "label": "Outlined button"
              },
              {
                "value": "outline_with_text_link",
                "label": "Outlined button with Text link"
              }, 
              {
                "value": "text_link",
                "label": "Text link"
              }
            ],
            "default": "solid_with_outline"
          }
        ]
      }
    ],
    "presets": [
      {
        "name": "Slideshow",
        "blocks": [
          {
            "type": "slide"
          },
          {
            "type": "slide"
          },
          {
            "type": "slide"
          }
        ]
      }
    ]
  }
{% endschema %}
